<template>
	<z-paging ref="paging" :fixed="false" @query="queryList" use-virtual-list>
		<template #cell="{item,index}">
			<div class="item flex" :class="item.read_status == 't' && 'read'" style="height: 200rpx;">
				<div class="item-l" v-if="multipleMode">
					<u-checkbox v-model="item.checked" @change="listCheck"></u-checkbox>
				</div>
				<div class="item-r">
					<div class="item-r-con">
						<!-- 原创 -->
						<div class="content flex" v-show="item.publication_type==1">
							<div class="text text-cut3" @click="toDestail(item)">
								<b class="sentiment" :class="'sentiment-'+item.sentiment_attr">{{item.sentiment_attr==1?"正":(item.sentiment_attr==2?"中":"负")}}</b>
								<b class="type" v-if="!!item.publication_type">原创</b>
								<span v-html="marked(item.hit_keywords, item.title || item.summary)"></span>
							</div>
							<div v-if="item.image || item.surface_img" class="img flex">
								<u-image :src="item.image ? item.image[0] : item.surface_img ? item.surface_img : ''"
									width="220rpx" height="130rpx" @click="previewImg(item.image ? item.image : item.surface_img ? [item.surface_img] : [])"
									@error="imgError(item)">
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u-image>
							</div>
						</div>
						<!-- 转发、评论 -->
						<div class="content" @click="toDestail(item)" v-show="item.publication_type!=1">
							<div class="text text-cut">
								<b class="sentiment" :class="'sentiment-'+item.sentiment_attr">{{item.sentiment_attr_name}}</b>
								<b class="type" v-if="!!item.publication_type">{{ item.publication_type==2?"转发":(item.publication_type==7?"评论":"弹幕") }}</b>
								{{ item.gather_site_name === '百度贴吧' ? item.content : item.title }}
							</div>
							<div class="source-text">
								<div class="source-text-content text-cut" v-html="(item.summary &&  ([...item.keywords,kw],item.summary))"></div>
								<div class="source-des flex">
									<span>{{ $u.timeFormat(item.retweeted_publish_time*1000, "yyyy-mm-dd hh:MM") }}</span>
									<div class="retweeted-right flex">
										<u-icon class="retweeted-user" name="account-fill" color="#999" size="28"></u-icon>
										<span class="source-text-name">{{ item.retweeted_user_name }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="des flex">
						<div class="info flex">
							<span class="time">{{ $u.timeFormat((item.router_time || item.publish_time)*1000, isToday((item.router_time || item.publish_time)*1000)?"hh:MM":"mm-dd hh:MM") }}</span>
							<u-avatar class="avatar" :src="item.avatar" size="30"></u-avatar>
							<span v-if="item.username" class="name text-cut">{{ item.username }}</span>
							<span class="flex" v-if="item.gather_site_name.includes('新浪')">
								<i class="v-1" v-if="item.verified_type==0 || item.verified==1"></i>
								<i class="v-2" v-else-if="item.verified_type>0 || item.verified==2"></i>
							</span>
							<span class="platform text-cut">{{ item.publisher_site_name || item.gather_site_name }}<span v-if="item.channel">-{{ item.channel }}</span></span>
							<span class="area">发布于&nbsp;{{ (item.ip_region && item.ip_region[0]) || item.province }}</span>
						</div>
						<u-icon name="more-dot-fill" color="#333" size="28" @click="openAction(item)"></u-icon>
					</div>
				</div>
			</div>
		</template>
	</z-paging>
</template>

<script>
import { mapState } from "vuex";
import { getFilterTime } from "@/common/tool.js";
import {
	articleList,
	toRead
} from "./../api/subject.js";
	
export default {
	data() {
		return {
			own: uni.getStorageSync("own"),
			list: [],
			kw: "",
			params: {
				page: 1,
				limit: 20,
				filter_ocr: "t"
			},
			
			actionData: {
				row: {},
				flah: ""
			},
			dateParams: {
				date_type: 6,
				date_time: []
			}
		};
	},
	watch: {
		isRefreshImgList() {
			uni.showLoading({
				title: "加载中"
			});
			this.$refs.paging.reload();
		}
	},
	computed: {
		...mapState(["isRefreshImgList", "multipleMode"]),
		tabIndex(){
			return this.$parent.tabCurrent
		}
	},
	mounted() {
		uni.$on("markRead",(ids)=>{
			if(!!this.list.filter(item=>ids.includes(item.id)).length){
				ids.map(id=>{
					this.$set(this.list.filter(item=>item.id == id)[0], "read_status", "t");
				})
			}
		});
		uni.$on("markSentiment",({id, val})=>{
			if(!!this.list.filter(item=>item.id == id).length){
				this.$set(this.list.filter(item=>item.id == id)[0], "sentiment_attr", val);
			}
		});
		this.$on("checkAll", (val)=>{
			this.$store.state.articleListLength =  val ? this.list.length : 0;
			this.list.map(item=>{
				this.$set(item, "checked", val);
			});
			this.$store.commit("selectedArticleHandle", this.list);
		});
	},
	methods: {
		getList(callback) {
			if(this.$store.state.filterParams.date_type != 6) this.dateParams.date_time = getFilterTime(this.$store.state.filterParams.date_type);
			if(this.own.includes(45)){
				const queryParams = {
					...this.params,
					...this.$store.state.listParams,
					...this.$store.state.filterParams,
					id:!this.$store.state.subjects.length?[]:[this.$store.state.subjects[0].id]
				};
				if(this.params.page == 1 && !this.list.length) uni.showLoading({title: "加载中"});
				articleList(queryParams).then(({code, data})=>{
					uni.hideLoading();
					if(code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.$refs.paging.complete(data.list);
						this.list = [ ...this.list, ...data.list ];
						this.$store.state.articleListLength = this.list.length;
						callback && callback();
					}
				});
			}
		},
		queryList(pageNo, pageSize) {
			this.params.page = pageNo;
			this.params.limit = pageSize;
			this.getList();
		},
		openAction(row) {
			this.$store.state.isAction = true;
			this.actionData = {
				row: row,
				flag: "imageList"
			};
			this.$emit("updateRow", this.actionData)
			uni.hideTabBar();
		},
		toDestail(e) {
			uni.$emit("markRead",[e.id]);
			this.$u.route("/pages/details/details",{
				id: e.id,
				l_id: e.l_id
			});
		},
		listCheck() {
			setTimeout(()=>{
				let arr = this.list.filter(item=>item.checked);
				this.$store.commit("selectedArticleHandle", arr);
			});
		},
		previewImg(imgs) {
			uni.previewImage({
				urls: imgs
			});
		},
		isToday(timestamp) {
		  const date = new Date(timestamp);
		  const today = new Date();
		  return (
		    date.getDate() === today.getDate() &&
		    date.getMonth() === today.getMonth() &&
		    date.getFullYear() === today.getFullYear()
		  );
		},
		imgError(row) {
		  row.image = null;
			row.surface_img = null;
		},
	},
};
</script>

<style lang="scss" scoped>
.main{
	height: 100%;
	overflow-y: auto;
}
.item{
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #F1F1F1;
	.item-l{
		margin-top: 4rpx;
	}
	.item-r{
		width: 100%;
	}
	.item-r-con{
		height: 160rpx;
	}
}
.text{
	flex: 1;
	font-size: 32rpx;
	line-height: 46rpx;
	word-break: break-all;
}
.img{
	width: 220rpx;
	height: 130rpx;
	margin-left: 20rpx;
}
.sentiment{
	margin-right: 5rpx;
	font-size: 24rpx;
	padding: 4rpx 10rpx;
	border-radius: 5rpx;
	color: #fff;
}
.sentiment-1 {
	background: #3477FF;
}
.sentiment-2 {
	background: #F8B551;
}
.sentiment-3 {
	background: #E60012;
}
.des{
	margin-top: 20rpx;
	font-size: 24rpx;
	align-items: center;
	justify-content: space-between;
}
.info{
	align-items: center;
}
.avatar{
	width: 50rpx;
	height: 50rpx;
	margin-left: 10rpx;
	margin-right: 5rpx;
}
.name{
	max-width: 200rpx;
}
.platform{
	margin-left: 10rpx;
	color: #1E62FC;
	max-width: 200rpx;
}
.area{
	margin-left: 10rpx;
}
.v-1,.v-2{
	margin-left: 5rpx;
	width: 20rpx;
	height: 20rpx;
	background: url("./../static/cert-1.png") no-repeat center/contain;
}
.v-2{
	background: url("./../static/cert-2.png") no-repeat center/contain;
}
.read{
	color: #999;
}
</style>